<template>
  <div class="dy-main InsuranceMain">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">保险<div slot="right" @click="gotoDealSearch()">交易查询</div></x-header>
    </div>
    <div class="dy-body">
      <div class="yellowPart">
        <div class="yellowBack">
          <div class="titleMsg">东亚保险</div>
          <div class="myInsDiv">
            <div class="MyInsurance" @click="gotoMyPrdList()">我的保单</div>
          </div>
          <div class="desMsg">为您精选好保险</div>
        </div>
        <div class="checkIconList">
          <div class="tag" :class="{'tagIsCheck': isChecked === '1'}" @click="checkClick('1')">
            <img class="Icon" src="../../assets/img/Insurance/AIns.png">
            <div :class="{'isCheck': isChecked === '1'}" class="IconMsg">A险</div>
          </div>
          <div class="tag" :class="{'tagIsCheck': isChecked === '2'}" @click="checkClick('2')">
            <img class="Icon" src="../../assets/img/Insurance/carIns.png">
            <div :class="{'isCheck': isChecked === '2'}" class="IconMsg">车险</div>
          </div>
          <div class="tag" :class="{'tagIsCheck': isChecked === '3'}" @click="checkClick('3')">
            <img class="Icon" src="../../assets/img/Insurance/lifeIns.png">
            <div :class="{'isCheck': isChecked === '3'}" class="IconMsg">寿险</div>
          </div>
        </div>
      </div>
      <div class="prdList">
        <scroller lock-x use-pullup use-pulldown height="100%" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" ref="scroller">
          <div>
            <div class="dataBox" v-for="(item, index) in InsList" :key="index" @click="gotoDetail()">
              <div class="topMsg">
                <div class="prdName">{{ item.riskName }}</div>
                <div class="prdDes">{{ item.riskTypeName }}</div>
                <div v-if="item.Sing === '1'" class="popularitySign">人气</div>
                </div>
              <div class="minMoney">{{ item.minAmt }}元起</div>
            </div>
            <div v-if="InsList.length === 0" class="nodata">没有更多的数据</div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isChecked: '1',
      InsList: [],
      InsList1: [],
      InsList2: [],
      InsList3: [],
      n: 10
    }
  },
  methods: {
    checkClick (type) {
      if (type === '1') {
        this.isChecked = '1'
        this.InsList = this.InsList1
      } else if (type === '2') {
        this.isChecked = '2'
        this.InsList = this.InsList2
      } else {
        this.isChecked = '3'
        this.InsList = this.InsList3
      }
    },
    gotoDetail () {
      this.$router.push({name: 'InsurancePrdDetail'})
    },
    gotoMyPrdList () {
      this.$router.push({name: 'MyInsuranceList'})
    },
    gotoDealSearch () {
      this.$router.push({name: 'InsuranceDealSearch'})
    },
    getInsuranceData () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'InsuranceSearch'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            self.InsList = response.data.data[0].arrays
            self.InsList1 = response.data.data[0].arrays
            self.InsList2 = response.data.data[0].arrays1
            self.InsList3 = response.data.data[0].arrays2
          } else {
            alert('fail')
          }
        }
      )
    },
    loadMore () {
      setTimeout(() => {
        this.n += 10
        console.log(this.n)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
        if (this.n === 30) { // unload plugin
          setTimeout(() => {
            this.$refs.scroller.disablePullup()
          }, 100)
        }
      }, 2000)
    },
    refresh () {
      this.n = 10
      this.$refs.scroller.enablePullup()
      setTimeout(() => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroller.donePulldown()
            this.pullupEnabled && this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.getInsuranceData()
  }
}
</script>

<style lang="less">
@dis: inline-block;

.InsuranceMain{
  .dy-body{
    .yellowPart{
      position: relative;
      width: 100%;
      height: 3.96rem;
      .yellowBack{
        background: #f39c12;
        height: 3.01rem;
        >div{
          display: inline-block;
        }
        .titleMsg{
          color: #fff;
          font-size: 0.5rem;
          padding: 0.37rem 3.4rem 0.16rem 0.29rem;
        }
        .myInsDiv{
          .MyInsurance{
            text-align: center;
            font-size: 0.24rem;
            line-height: 0.46rem;
            height: 0.46rem;
            width:1.4rem;
            border: 1px solid #fff;
            color: #fff;
            border-radius: 0.23rem;
          }
        }
        .desMsg{
          font-size: 0.4rem;
          color: #fff;
          padding: 0 0 0.27rem 0.29rem;
        }
      }
      .checkIconList{
        width: 5.53rem;
        height: 1.9rem;
        position: absolute;
        top: 2rem;
        margin-left: 1rem;
        background: #fff;
        border-left: 1px solid #ff9900;
        box-shadow: 1px 1px 1px #ff9900;
        padding-top: 0.4rem;
        .tag{
          display:inline-block;
          text-align: center;
          height: 100%;
          margin-left: 0.93rem;
        }
        .Icon{
          width: 0.42rem;
          height: 0.47rem;
        }
        .isCheck{
          color: #ff9900;
        }
        .tagIsCheck{
          border-bottom: 3px solid #f39c12;
        }
        .IconMsg{
          font-size: 0.3rem;
          padding-top: 0.3rem;
        }
      }
    }
    .prdList{
      height: 68%;
      width: 100%;
      padding-left:0.31rem;
      .dataBox{
        line-height: 0.6rem;
        padding-top: 0.4rem;
        .topMsg{
          >div{
            display: inline-block;
          }
          .prdName{
            font-size: 0.3rem;
            font-weight: bolder;
            display: @dis;
          }
          .prdDes{
            font-size: 0.26rem;
            display: @dis;
          }
          .popularitySign{
            width:0.5rem;
            height: 0.27rem;
            background: #E93732;
            font-size: 0.16rem;
            line-height: 0.27rem;
            text-align: center;
            color: #fff;
            display: @dis;
          }
        }
        .minMoney{
          font-size: 0.28rem;
          color: #f39c12;
        }
      }
      .nodata{
        font-size: 0.3rem;
        text-align: center;
        color: #f39c12;
        padding: 3rem 0 5.1rem;
      }
    }
  }
}
</style>
